<template>
	<view class="container">
		<view class="content">
			<English :book="data.book" :swiperList="swiperList" v-if="activeTab === 0" />
			<Chinese :book='data.chineseBook' :swiperList = "swiperChineseList" v-if="activeTab === 1" />
			<My :realName='userInfo.realName' :cover='userInfo.cover' v-if="activeTab === 2" />
		</view>
		<view class="tabbar">
			<view class="item" v-for="item in tabbar" :key="item.id" @click="activeTab = item.id">
				<image :src="item.activeIcon" class="active_icon"  v-if="item.id === activeTab"/>
				<image :src="item.icon" class="icon" v-else />
				<span :class="[item.id === activeTab ? 'activeTitle' : 'nornalTitle']">{{ item.name }}</span>
			</view>
		</view>
		<TipCollectMp/>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import English from './english/index.vue';
	import Chinese from './chinese/index.vue';
	import My from './my/index.vue';
	import TipCollectMp from '@/components/tip-collect-mp/index.vue';
	import { onShareAppMessage, onLoad, onShow } from '@dcloudio/uni-app';
	import { getUserInfoApi, getMySelfApi, getBannerApi } from '@/apis/index';
	const tabbar = ref([
		{id:0, name: '英语', icon: '/static/tabbar/english.png', activeIcon:'/static/tabbar/english_active.png'},
		{id:1, name: '语文', icon: '/static/tabbar/chinese.png', activeIcon:'/static/tabbar/chinese_active.png'},
		{id:2, name: '我的', icon: '/static/tabbar/my.png', activeIcon:'/static/tabbar/my_active.png'},
	]);
	const activeTab = ref(0);
	const swiperList = ref([]);
	const swiperChineseList = ref([]);
	const data = reactive({
	    book:{
	        booksId: 1335041,
	        cover: '/static/english/default-book-1.jpg',
	        id: 1335041,
	        title: '人教-英语-新起点-一年级上册',
	        description: '一年级上册'
	    },
		chineseBook:{
			booksId: 1156871,
			cover: '/static/chinese/chinese_default_book.jpg',
			id: 1335041,
			title: '人教-语文-五四制-一年级上册',
			description: '一年级上册'
		}
	})
	onShow(()=>{
		getUserInfo();
		getMySelfBook();
		getMyChineseSelfBook();
	})
	onMounted(()=>{
		getBanner();
	})
	onShareAppMessage(()=>{
	   return {
	       title: '小学初中同步课本点读工具',
	       path:`/pages/index/index`,
	   }
	})
	const getBanner = async() => {
		const {obj} = await getBannerApi({flag: 2})
		const newValue = [obj.banner1, obj.banner2].filter((item, index) => typeof item !== 'number' && item !== null);
		const newChineseValue = [obj.banner3, obj.banner4].filter((item, index) => typeof item !== 'number' && item !== null)
		swiperList.value = newValue;
		swiperChineseList.value = newChineseValue;
	}
	const getMySelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'english'})
		if (obj.length){
			data.book = obj[0]
		}
	}
	const getMyChineseSelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'chinese'})
		if (obj.length){
			data.chineseBook = obj[0]
		}
	}
	const userInfo = reactive({
	    cover: '/static/my/default_avar.png',
	    realName: '未登录',
	})
	const getUserInfo =  async () =>{
	    const { obj } = await getUserInfoApi()
	    userInfo.realName = obj.realname; 
	    userInfo.cover = obj.avar;
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F9FAFE;
		.content{
			display: flex;
			flex: 1;
			width: 100%;
			z-index: 1;
		}
		.tabbar{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #FFF;
			padding-bottom: 68rpx;
			z-index: 999;
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.icon{
					width: 56rpx;
					height: 56rpx;
				}
				.active_icon{
					width: 88rpx;
					height: 88rpx;
					position: absolute;
					top: -20rpx;
				}
				.nornalTitle{
					font-weight: 400;
					font-size: 24rpx;
					color: #B3B3B3;
					margin-top: 6rpx;
				}
				.activeTitle{
					font-weight: 500;
					font-size: 24rpx;
					color: #4EC584;
					margin-top: 62rpx;
				}
			}
		}
	}
</style>
